import { Comment, Tooltip, List, Avatar } from 'antd';
import moment from 'moment';
import "./index.scss";
import { AddComment } from './../AddComment/index';
import { Toast } from 'antd-mobile';
import { connect } from 'react-redux';
import { getCommentList } from './../../action/action';

@connect(
    state => {
        return {
            commentData: state.video.commentData
        }
    }
)
export class VideoComment extends React.Component {
    state = {
        author: null,
        content: null,
        reply: false,
        _id: null
    }
    componentDidMount() {
        let { dispatch } = this.props;
        let vid = this.props.match.params.vid;
        dispatch(getCommentList(vid, (data) => { }));
    }
    comment() {
        this.setState({
            reply: false
        })
        this.refs.commentList.style.display = "none"; this.refs.addComment.firstElementChild.style.display = "block";
    }
    reply(author, content, _id) {
        this.setState({
            author,
            content,
            reply: true,
            _id
        })
        this.refs.commentList.style.display = "none"; this.refs.addComment.firstElementChild.style.display = "block";
    }
    render() {
        let { userData, commentData } = this.props;
        let data = null;
        if (commentData) {
            data = commentData.map((item, index) => {
                let navData = null;
                if (item.replyList.length != 0) {
                    navData = commentData.filter((reitem, index) => item.replyList.indexOf(reitem._id) != -1)
                }
                return {
                    _id: item._id,
                    author: item.utel,
                    avatar: item.avatar || null,
                    content: item.content,
                    datetime: item.datetime,
                    replyList: item.replyList,
                    navData,
                }
            });
            return (
                <div className="all-comment" ref="allComment">
                    <div className="video-add-comment" ref="addComment">
                        <AddComment _id={this.state._id} author={this.state.author} content={this.state.content} reply={this.state.reply} {...this.props} />
                    </div>
                    <div ref="commentList">
                        <div className="info">
                            {/* <div className="via">
                                <img src={} />
                            </div> */}
                            <div className="msg" onClick={() => { userData ? this.comment() : Toast.info("未登录，请先登录", 1) }}>
                                <h4>发表你的评论...</h4>
                            </div>
                            <i className="iconfont icon-chahao" onClick={() => { this.refs.allComment.style.display = "none"; this.refs.allComment.parentElement.previousElementSibling.style.display = "block"; }}></i>
                        </div>
                        <List
                            className="comment-list"
                            header={`${data.length} 评论`}
                            itemLayout="horizontal"
                            dataSource={data}
                            renderItem={item => (
                                <Comment
                                    actions={[<span onClick={() => this.reply(item.author, item.content, item._id)}>回复</span>]}
                                    author={item.author}
                                    avatar={item.avatar}
                                    content={item.content}
                                    datetime={item.datetime}
                                >
                                    {item.replyList.length != 0 ?
                                        <List
                                            className="comment-list"
                                            itemLayout="horizontal"
                                            dataSource={item.navData}
                                            renderItem={item => (
                                                <Comment
                                                    author={item.author}
                                                    avatar={item.avatar}
                                                    content={item.content}
                                                    datetime={item.datetime}
                                                />
                                            )}
                                        />
                                        :
                                        null
                                    }
                                </Comment>
                            )}
                        />
                    </div>
                </div>
            )
        } else {
            return (<div></div>)
        }
    }
}